<ion-content>
  <div class="container-menu">
    <div class="hotel-detail-container">
      <!--展示图片-->
      <div class="picture-container">
        <img src="{{image.imagePrefix+image.type.restaurant+'&'+restaurant.rId}}" (click)="scrollToB()">
        <!--店铺名字-->
        <div class="picture-info-container">
          <div class="hotel-name">{{restaurant.rName}}</div>
        </div>
      </div>
    </div>
    <div class="container-foods part-size">
      <div class="container-foods-left">
        <div class="full-size ">
          <div class="full-size scroll-y" style="background-color: #f3f3f3;">
            <ng-container *ngFor="let type of restaurant.fTypes;let i = index">
              <div [ngClass]="i===selectedIndex?'item-selected':'item-default'" (click)="showGoods(i)">
                <div class="type-left">{{type.fType}}</div>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
      <ion-content class="container-foods-right scroll-y">
        <div *ngFor="let type of restaurant.fTypes;let j = index" id="#ID{{j}}">
          <div [ngClass]="selectedIndex === j?'show-item':'hide-item'">
            <div class="food-item" *ngFor="let item of type.foods">
              <div style="width: 130px;height: 100%">
                <img src="{{image.imageById+item.imgId}}">
              </div>
              <div class="right-container">
                <div class="food-item-header">
                  <div class="food-item-header-top">{{item.fName}}</div>
                  <div class="food-item-header-bottom">{{item.remark}}</div>
                  <div class="food-item-header-bottom">月售{{item.sale}}</div>
                </div>
                <div class="food-item-bottom">
                  <div class="food-item-bottom-left">
                    <span class="text-small">￥</span>
                    <span class="text-big">{{item.price}}</span>
                  </div>
                  <div class="food-item-bottom-right" [ngClass]="item.fNum===0?'flex-end':'space-between'">
                    <button ion-button clear class="good-icon-reduce" (click)="reduceGood(item)" *ngIf="item.fNum!==0">
                      <ion-icon name="ios-remove-circle-outline" color="danger"></ion-icon>
                    </button>
                    <div class="good-pay-amount" *ngIf="item.fNum!==0">
                      <span>{{item.fNum}}</span>
                    </div>
                    <button ion-button clear color="primary" (click)="addGood(item)">
                      <ion-icon name="ios-add-circle"></ion-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

      </ion-content>

    </div>

  </div>
  <div id="backGroundBg" class="shade" tappable (click)="changeShoppingState()"
       [ngClass]="shoppingState?'showBack':'hideBack'">
  </div>

</ion-content>
<ion-footer>
  <div class="footer-shopping" [ngClass]="shoppingState?'showItem animated fadeInUp':'hideItem'">
    <div class="footer-shopping-header">
      <span>已选商品</span>
      <button (click)="cleanAll()"><i class="fa fa-trash-o" aria-hidden="true"></i>清空</button>
    </div>
    <ion-scroll scrollY="true" class="footer-shopping-content">
      <ng-container *ngFor="let item of basket.foodsList;let i = index">
        <div class="content-divider" *ngIf="item.fNum>0">
          <div class="divider-left">{{item.fName}}</div>
          <div class="divider-center">￥{{item.price * item.fNum}}</div>
          <div class="divider-right">
            <button (click)="addGood(item)">
              <ion-icon name="ios-add-circle"></ion-icon>
            </button>
            <button>{{item.fNum}}</button>
            <button (click)="reduceGood(item,i)">
              <ion-icon name="ios-remove-circle-outline"></ion-icon>
            </button>
          </div>
        </div>
      </ng-container>
    </ion-scroll>
    <div class="footer-shopping-footer"></div>
  </div>
  <div class="footer-left" (click)="changeShoppingState()">
    <button>
      <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    </button>
    <span>总计 ￥{{basket.allPrice}}</span>
  </div>
  <button class="footer-right" (click)="goRemark()">结算</button>
</ion-footer>
